<script lang="ts" setup>
import { useAuthStore } from '@/store/auth';
import { useUserStore } from '@/store/user';
import { RouteMap, useRouter } from '@/router';
import { onMounted, ref } from 'vue';
import { channelInfo, staffInfo } from '@/api/user';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';
import { rpx2px } from '@/utils/px';
import { getNavbarHeight } from '@/utils/navbar';
import { useTitle } from '@/hooks/useTitle';
import { onShow } from '@dcloudio/uni-app';

const { t } = useLocale();
const router = useRouter();
const authStore = useAuthStore();
const userStore = useUserStore();
const staffDetail = ref();
const channelDetail = ref();

onMounted(async () => {
  await userStore.getUserInfo();
  if (userStore.user.staffId > 0) {
    await getStaffInfo();
  } else if (userStore.user.channelId > 0) {
    await getChannelInfo();
  }
});

async function getStaffInfo() {
  const res = await staffInfo(userStore.user.staffId);
  if (res.code == 0) {
    staffDetail.value = res.data;
  }
}

async function getChannelInfo() {
  const res = await channelInfo(userStore.user.channelId);
  if (res.code == 0) {
    channelDetail.value = res.data;
  }
}

function navigateToLogin() {
  if (!authStore.isLoggedIn) {
    router.to(RouteMap.login);
  }
}

function gotoKf() {
  if (authStore.isLoggedIn) {
    uni.navigateTo({
      url: '/pages/cs/cs'
    });
  } else {
    navigateToLogin();
  }
}

// 联系我们
function callKf() {
  uni.makePhoneCall({
    phoneNumber: '+819085225510' //仅为示例
  });
}

function copyMemberNo() {
  uni.setClipboardData({
    data: userStore.user.memberNo,
    success: function () {
      uni.showToast({
        title: 'success',
        icon: 'none'
      });
    }
  });
}

function navigateToOrders() {
  router.to(RouteMap.orders);
}

function gotoShare() {
  if (authStore.isLoggedIn) {
    router.to(RouteMap.userShare);
  } else {
    uni.showToast({
      title: t('PleaseLoginFirst'),
      icon: 'none'
    });
  }
}

const paddingTop = ref(rpx2px(176));
const paddingBottom = ref(rpx2px(120));

useTitle('LKey_account', () => {
  paddingTop.value = paddingTop.value - getNavbarHeight();
});
</script>

<template>
  <view class="relative">
    <!-- 顶部背景图 -->
    <image
      class="user-top-bg"
      src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/user_and_login_top_bg.png"
    />

    <view
      class="absolute top-0 left-0 right-0"
      :style="`padding-top: ${paddingTop}px; padding-bottom: ${paddingBottom}px`"
    >
      <view class="user-setting">
        <image
          v-if="authStore.isLoggedIn"
          src="/static/icon_my_setting.png"
          @click="authStore.isLoggedIn ? router.to(RouteMap.account) : navigateToLogin"
        />
        <apt-language-selector v-if="!isWechat()">
          <template #trigger>
            <view class="flex flex-1 justify-end">
              <image src="/static/icon_my_lang.png" />
            </view>
          </template>
        </apt-language-selector>
      </view>
      <!-- 用户基本信息 -->
      <view class="flex items-center user-info" @click="navigateToLogin">
        <image
          :src="userStore.user.avatar"
          class="w-16 h-16 rounded-full"
          @click="authStore.isLoggedIn ? router.to(RouteMap.account) : ''"
        />
        <view class="ml-3">
          <template v-if="authStore.isLoggedIn">
            <view class="flex items-center mb-1" @click="router.to(RouteMap.account)">
              <text class="text-xl text-primary font-medium">
                {{
                  userStore.user.fullName.trim()
                    ? userStore.user.fullName
                    : '住一用户' + userStore.user.memberNo
                }}
              </text>
              <image
                v-if="userStore.user.rebateMode == 'MEMBER'"
                :src="userStore.user.levelBadge"
                class="w-5 h-5"
              />
              <view v-if="userStore.user.rebateMode == 'STAFF'" class="my-staff-top">
                {{ t('LUKey_staff') }}
                <image src="/static/icon_my_staff.png" />
              </view>
              <view v-if="userStore.user.rebateMode == 'CHANNEL'" class="my-channel-top">
                {{ t('LUKey_channel') }}
                <image src="/static/icon_my_channel.png" />
              </view>
            </view>
            <view class="flex items-center" @click="router.to(RouteMap.pointsList)">
              <image class="w-4 h-4 mr-1" src="/static/icon_my_points.png" />
              <text class="text-base text-primary font-normal">
                {{ `${userStore.user.points} ${t('LAKey_score')}` }}
              </text>
            </view>
          </template>
          <template v-else>
            <view class="mb-1 text-xl text-primary font-medium">
              {{ t('LLKey_login') + '/' + t('LLKey_register') }}
            </view>
            <view class="text-base text-primary font-normal">
              {{ t('LLKey_loginTips') }}
            </view>
          </template>
        </view>
      </view>

      <!-- 我的服务 -->
      <view class="flex justify-between items-center user-services mb-4">
        <!-- 收藏 -->
        <view class="flex flex-col items-center" @click="router.to(RouteMap.collectList)">
          <image class="w-8 h-8 mb-0_5" src="/static/icon_my_favorites.png" />
          <text class="text-sm text-primary">
            {{ t('LAKey_collect') }}
          </text>
        </view>
        <!-- 分享 -->
        <view class="flex flex-col items-center" @click="gotoShare">
          <image class="w-8 h-8 mb-0_5" src="/static/icon_my_shares.png" />
          <text class="text-sm text-primary">
            {{ t('LCKey_share') }}
          </text>
        </view>
        <!-- 订单 -->
        <view class="flex flex-col items-center" @click="navigateToOrders">
          <image class="w-8 h-8 mb-0_5" src="/static/icon_my_orders.png" />
          <text class="text-sm text-primary">
            {{ t('LAKey_order') }}
          </text>
        </view>
        <!-- 消息 -->
        <view class="flex flex-col items-center" @click="router.to(RouteMap.messageList)">
          <image class="w-8 h-8 mb-0_5" src="/static/icon_my_messages.png" />
          <text class="text-sm text-primary">
            {{ t('LAKey_message') }}
          </text>
        </view>
      </view>

      <!-- 会员信息 -->
      <view v-if="authStore.isLoggedIn" class="mx-4 user-vip relative">
        <image
          v-if="userStore.user.rebateMode == 'MEMBER'"
          :src="userStore.user.levelCard"
          class="w-full h-full"
        />
        <image
          v-if="userStore.user.rebateMode == 'STAFF'"
          class="w-full h-full"
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/my_staff_bg.png"
        />
        <image
          v-if="userStore.user.rebateMode == 'CHANNEL'"
          class="w-full h-full"
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/my_channel_bg.png"
        />
        <view class="absolute top-0 left-0 w-full h-full">
          <view class="mx-4 user-vip-content flex justify-between items-center h-full">
            <view>
              <view class="flex mb-0_5">
                <image
                  v-if="userStore.user.rebateMode == 'MEMBER'"
                  :src="userStore.user.levelBadge"
                  class="w-5 h-5 mr-0_5"
                />
                <image
                  v-if="userStore.user.rebateMode == 'STAFF'"
                  class="w-5 h-5 mr-0_5"
                  src="/static/icon_my_staff.png"
                />
                <image
                  v-if="userStore.user.rebateMode == 'CHANNEL'"
                  class="w-5 h-5 mr-0_5"
                  src="/static/icon_my_channel.png"
                />
                <text
                  v-if="userStore.user.rebateMode == 'MEMBER'"
                  class="text-lg text-primary font-medium"
                >
                  {{ userStore.user.levelName }}
                </text>
                <text
                  v-if="userStore.user.rebateMode == 'STAFF'"
                  class="text-lg text-primary font-medium"
                >
                  {{ t('LUKey_staff') }}
                </text>
                <text
                  v-if="userStore.user.rebateMode == 'CHANNEL'"
                  class="text-lg text-primary font-medium"
                >
                  {{ t('LUKey_channel') }}
                </text>
              </view>
              <view class="flex items-center">
                <text v-if="userStore.user.rebateMode == 'MEMBER'" class="text-xs text-secondary">
                  {{ `${t('LAKey_vipNo')}: ${userStore.user.memberNo}` }}
                </text>
                <text v-if="userStore.user.rebateMode == 'STAFF'" class="text-xs text-secondary">
                  {{ `${t('LUKey_staffNumber')}: ${userStore.user.memberNo}` }}
                </text>
                <text v-if="userStore.user.rebateMode == 'CHANNEL'" class="text-xs text-secondary">
                  {{ `${t('LUKey_channelNumber')}: ${userStore.user.memberNo}` }}
                </text>
                <image class="w-3 h-3 ml-1" src="/static/icon_copy.png" @click="copyMemberNo" />
              </view>
            </view>
            <view
              v-if="userStore.user.rebateMode == 'MEMBER'"
              class="w-15 h-6 rounded-3xl user-vip-btn flex"
              @click="router.to(RouteMap.webWeb, { key: 'memberlevel' })"
            >
              <text class="text-xs font-medium m-auto">
                {{ t('LAKey_privileges') }}
              </text>
            </view>
            <view
              v-if="userStore.user.rebateMode == 'STAFF'"
              class="w-15 h-6 rounded-3xl user-staff-btn flex"
              @click="router.to(RouteMap.distributionIndex)"
            >
              <text class="text-xs font-medium m-auto">
                {{ t('LDKey_distributionCenter') }}
              </text>
            </view>
            <view
              v-if="userStore.user.rebateMode == 'CHANNEL'"
              class="w-15 h-6 rounded-3xl user-channel-btn flex"
              @click="router.to(RouteMap.distributionIndex)"
            >
              <text class="text-xs font-medium m-auto">
                {{ t('LDKey_distributionCenter') }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <!-- 常用工具 -->
      <view class="user-tools bg-white p-4 mx-4">
        <view class="text-lg text-primary font-medium">
          {{ t('LAKey_commonTools') }}
        </view>
        <view class="flex flex-wrap items-stratch">
          <!-- 联系我们 -->
          <view class="flex flex-col justify-center items-center w-full-25 mt-4" @click="callKf">
            <image class="user-tools-icon mb-0_5" src="/static/icon_contact_us.png" />
            <view class="w-18 h-4 overflow-hidden text-center text-sm text-primary font-normal">
              {{ t('LAKey_contactUs') }}
            </view>
          </view>
          <!-- 用户协议 -->
          <view
            class="flex flex-col justify-center items-center w-full-25 mt-4"
            @click="router.to(RouteMap.webWeb, { key: 'useragreement' })"
          >
            <image class="user-tools-icon mb-0_5" src="/static/icon_protocol.png" />
            <view class="w-18 h-4 overflow-hidden text-center text-sm text-primary font-normal">
              {{ t('LAKey_agreement') }}
            </view>
          </view>
          <!-- 隐私政策 -->
          <view
            class="flex flex-col justify-center items-center w-full-25 mt-4"
            @click="
              router.to(RouteMap.webWebview, {
                url: encodeURIComponent(authStore.GetprivacyText())
              })
            "
          >
            <image class="user-tools-icon mb-0_5" src="/static/icon_privacy.png" />
            <view class="w-18 h-4 overflow-hidden text-center text-sm text-primary font-normal">
              {{ t('LAKey_privacy') }}
            </view>
          </view>
          <!-- 帮助中心 -->
          <view
            class="flex flex-col justify-center items-center w-full-25 mt-4"
            @click="router.to(RouteMap.helpCenter)"
          >
            <image class="user-tools-icon mb-0_5" src="/static/icon_help.png" />
            <view class="w-18 h-4 overflow-hidden text-center text-sm text-primary font-normal">
              {{ t('LAKey_help') }}
            </view>
          </view>
          <!-- 优惠券 -->
          <view
            class="flex flex-col justify-center items-center w-full-25 mt-4"
            @click="router.to(RouteMap.couponList)"
          >
            <image class="user-tools-icon mb-0_5" src="/static/icon_coupons.png" />
            <view class="w-18 h-4 overflow-hidden text-center text-sm text-primary font-normal">
              {{ t('LRKey_coupon') }}
            </view>
          </view>
          <!-- 客服 -->
          <view class="flex flex-col justify-center items-center w-full-25 mt-4" @click="gotoKf">
            <image class="user-tools-icon mb-0_5" src="/static/icon_tabbar_im.png" />
            <view class="w-18 h-4 overflow-hidden text-center text-sm text-primary font-normal">
              {{ t('LKey_service') }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <apt-tab-bar></apt-tab-bar>
</template>

<style lang="scss">
.user {
  &-top-bg {
    width: 750rpx;
    height: 660rpx;
  }

  &-setting {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 32rpx;

    image {
      display: block;
      width: 48rpx;
      height: 48rpx;
    }
  }

  &-info {
    margin-bottom: 36rpx;
    padding-left: 52rpx;
    padding-right: 52rpx;
  }

  &-services {
    padding-left: 62rpx;
    padding-right: 62rpx;
  }

  &-vip {
    width: 686rpx;
    height: 112rpx;
    margin-bottom: 20rpx;

    &-content {
      padding-top: 18rpx;
      padding-bottom: 18rpx;
    }

    &-btn {
      background: linear-gradient(360deg, #373737 0%, #808080 99%);
      color: #ffe3bf;
    }
  }

  &-staff {
    width: 686rpx;
    height: 112rpx;
    margin-bottom: 20rpx;

    &-content {
      padding-top: 18rpx;
      padding-bottom: 18rpx;
    }

    &-btn {
      background: linear-gradient(360deg, #3c981a 4%, #6ac327 97%);
      color: #ffffff;
    }
  }

  &-channel {
    width: 686rpx;
    height: 112rpx;
    margin-bottom: 20rpx;

    &-content {
      padding-top: 18rpx;
      padding-bottom: 18rpx;
    }

    &-btn {
      background: linear-gradient(360deg, #0440a6 0%, #0493fb 100%);
      color: #ffffff;
    }
  }

  &-tools {
    width: 686rpx;
    border-radius: 20rpx;

    &-icon {
      width: 60rpx;
      height: 60rpx;
    }
  }
}

.my-staff-top {
  margin-left: 24rpx;
  position: relative;
  padding-right: 8rpx;
  height: 30rpx;
  border-radius: 30rpx;
  background: linear-gradient(270deg, #ff9c5f 0%, #ffd629 99%);
  padding-left: 20rpx;
  font-weight: 500;
  font-size: 20rpx;
  color: #ffffff;
  line-height: 30rpx;

  image {
    display: block;
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    left: -24rpx;
    top: -8rpx;
  }
}

.my-channel-top {
  margin-left: 24rpx;
  position: relative;
  padding-right: 8rpx;
  height: 30rpx;
  border-radius: 30rpx;
  background: linear-gradient(270deg, #0348bf 0%, #2977ff 99%);
  padding-left: 20rpx;
  font-weight: 500;
  font-size: 20rpx;
  color: #ffffff;
  line-height: 30rpx;

  image {
    display: block;
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    left: -24rpx;
    top: -8rpx;
  }
}
</style>
